<template>
	<div>
		<el-form :inline='true'
		>
			<el-form-item>
				<el-input
				v-model='searchForm.name'
				placeholder="名称"
				clearable></el-input>
			</el-form-item>
			<el-form-item class="wd">
				<el-button type='primary' @click="goRoleList()"> 搜索</el-button>
			</el-form-item>
			<el-form-item class="wd"	>
				<el-button type="primary" @click="centerDialogVisibl=true"> 新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-popconfirm title="确定删除这条记录吗?" @confirm="">
				    <template #reference>
				      <el-button type="danger" slot="refernce" :disabled='delBtlStatu'>一键删除</el-button>
				    </template>
				  </el-popconfirm>
			</el-form-item>
		</el-form>
		
		  <el-table
		    ref="multipleTableRef"
		    :data="tableData"
		    style="width: 100%"
		    @selection-change="handleSelectionChange"
			torder
			stripe
		  >
		    <el-table-column type="selection" :selectable="selectable" width="55" />
		    
		    <el-table-column property="name" label="名称" width="120" />
		    <el-table-column property="code" label="唯一编码" />
			<el-table-column property="remark" label="描述" />
			<el-table-column
				prop="statu"
				label="状态"
			>
				<template v-slot="scope">
					<el-tag size="text" v-if="scope.row.statu ===1" type="success"> 正常</el-tag>
					<el-tag size="text" v-else-if="scope.row.statu ===0" type="danger"> 禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column
				prop="address"
				label="操作"
				sortable
				width="200"
			>
				<template v-slot="scope">
					<el-button size="text" @click="permHandle(scope.row.id)"> 分配权限</el-button>
					<el-button size="text" @click="editHandle(scope.row.id)"> 编辑</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-popconfirm title="确定删除这条记录吗?" @confirm="delhandle(scope.row.id)">
					    <template #reference>
					      <el-button size="text">删除</el-button>
					    </template>
					  </el-popconfirm>
				</template>
			</el-table-column>
		  </el-table>
		  <el-dialog
		    v-model="centerDialogVisibl"
		    title="title"
		    width="500"
		    :before-close="handleClose"
		    align-center
		  >
			<el-form
			   ref="editFormRef"
			   style="max-width: 600px"
			   :model="editForm"
			   :rules="editFormRules"
			   label-width="auto"
			   class="demo-editForm"
			   :size="formSize"
			   status-icon
			 >
			 
			  <el-form-item label="角色名称" prop="name" label-width="100px">
			       <el-input v-model="editForm.name" 	autocomplete="off"/>
			  </el-form-item>
			  <el-form-item label="唯一编码" prop="code" label-width="100px">
			       <el-input v-model="editForm.code" autocomplete="off"/>
			  </el-form-item>
			   <el-form-item label="描述" prop="remark" label-width="100px">
			        <el-input v-model="editForm.remark" autocomplete="off" />
			   </el-form-item>
			   	    <el-form-item label="状态" prop="statu" label-width="100px">
			        <el-radio-group v-model="editForm.statu">
			   		 <el-radio :label="0">禁用</el-radio>
			   		 <el-radio :label="1">正常</el-radio>
			   	 </el-radio-group>
			   </el-form-item>
			
			   <el-form-item label-width='260px'>
						<el-button type='primary' @click="subitForm('editForm')">创建</el-button>
						<el-button  @click="reseForm('editForm')">重置</el-button>
				</el-form-item>
			   
			 </el-form>
		  	 
		  </el-dialog>
		  <el-dialog
		   v-model="percenterDialogVisible"
		    title="分配权限"
		    width="500"
		    
		    align-center
		  >
		  		<el-form :model="perform">
					 <el-tree
					    ref="perTree"
					    style="max-width: 600px"
					    :data="perTreeData"
					    show-checkbox
					    :default-expand-all=true
					    node-key="id"
					    highlight-current
					    :props="defaultProps"
						:check-strictly=true
					  />
				</el-form>
				<template #footer>
				      <div class="dialog-footer">
				        <el-button @click="percenterDialogVisible = false">Cancel</el-button>
				        <el-button type="primary" @click="perFormsubmit('perform')">
				          Confirm
				        </el-button>
				      </div>
				    </template>
		  </el-dialog>
		  <div style="margin-top: 20px">
		    <el-button @click="toggleSelection([tableData[1], tableData[2]])">
		      Toggle selection status of second and third rows
		    </el-button>
		    <el-button @click="toggleSelection([tableData[1], tableData[2]], false)">
		      Toggle selection status based on selectable
		    </el-button>
		    <el-button @click="toggleSelection()">Clear selection</el-button>
		  </div>
			<el-pagination
			      v-model:current-page="current"
			      v-model:page-size="pageSize4"
			      :page-sizes="[10, 20,50, 100]"
			      :size="size"
			      :disabled="disabled"
			      :background="background"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			    />
	</div>
</template>
<script setup>
	import axios from 'axios';
	import { valid } from 'mockjs';
	import { useRouter } from 'vue-router'
	import { ElMessage } from 'element-plus'
	import { reactive,getCurrentInstance,ref} from 'vue';
	const searchForm=reactive({})
	let centerDialogVisibl=ref(false)
	const {proxy} = getCurrentInstance()
	let multipleTable=ref([])
	let delBtlStatu=ref(true)
	const perform=reactive({})
	const toggleSelection=(rows)=>{
		if(rows){
			rows.forEach(row=>{
				multipleTable.toggleSelection(row)
			})	
		}else{
			multipleTable.clearSelection()
		}
	}
	const handleSelectionChange=(val)=>{
		multipleTable=val
		
		delBtlStatu.value=val.length==0
	}
	const handleSizeChange = (val) => {
		size.value=val
	}
	const handleCurrentChange = (val) => {
		current.value=val
	}
	const defaultProps=reactive({
		clildern:'clidern',
		label:'name'
	})
	let percenterDialogVisible=ref(false)
	let total=ref()
	let size=ref()
	let current=ref()
	const editForm=reactive({})
	const tableData=reactive([])
	let perTreeData=ref([])
	const reseForm=()=>{
		
		proxy.$refs.editFormRef.resetFields()
		centerDialogVisibl.value=false
		editForm.value=''
		
		
	}
	const handleClose=()=>{
		reseForm('editForm')
	}
	const editFormRules={
		
		name:[
			{required:true,message:'请输入名称',trigger:'blur'}
		],
		code:[
			{required:true,message:'请输入权限编码',trigger:'blur'}
		],
		
		remark:[
			{required:true,message:'请填入排序号',trigger:'blur'}
		],
		statu:[
			{required:true,message:'请选择状态',trigger:'blur'}
		],
	}
	const router=useRouter()
	const subitForm =async(formName) => {
			await proxy.$refs.editFormRef.validate((valid)=>{
				if(valid){
					axios.post('/sys/role/'+(editForm.id?'update':'save'),editForm).then(res=>{
						 ElMessage({
						    message: 'Congrats, this is a success message.',
						    type: 'success',
						    plain: true,
							onclose:()=>{
								getMenuTree()
							}
							
						  })
						centerDialogVisibl.value=false
						  
					})
				}})}
		const editHandle=async(id)=>{
			
			await axios.get('/sys/role/info'+id).then(res=>{
				Object.assign(editForm,res.data.data)
				
				
				centerDialogVisibl.value=true
				
						}
			)
		}
		const delhandle=(id)=>{
			axios.post('/sys/role/delete/'+id).then(res=>{
				ElMessage({
				   message: 'Congrats, this is a success message.',
				   type: 'success',
				   plain: true,
				   onclose:()=>{
					goRoleList()}			
				 })
			})
		}
		let goRoleList= async ()=>{
			
			try{
				return await axios.get('/sys/role/list',{
					name:searchForm.name,
					current:current,
					size:size
					
				}).then(res=>{
					// userifo=res.data.datan
					Object.assign(tableData,res.data.data.records)
					
					size.value=res.data.data.size
					current.value=res.data.data.current
					total.value=res.data.data.total
					
				}
					
				)
			}catch (e){
				return await e
			}
		}
		const permHandle=(id)=>{
			percenterDialogVisible.value=true
			axios.get('/sys/role/info/'+id).then(res=>{
				proxy.$refs.perTree.setCheckedKeys(res.data.data.menuIds)
				Object.assign(perform,res.data.data)
			})
		}
		const goTree=()=>{
			axios.get('/sys/menu/list').then(res=>{
				perTreeData.value=res.data.data
			})
		}
		const perFormsubmit=(formName)=>{
			const menuIds=proxy.$refs.perTree.getCheckedKeys()
			axios.post('/sys/role/parm/'+perform.id,menuIds).then(res=>{
				ElMessage({
				   message: 'Congrats, this is a success message.',
				   type: 'success',
				   plain: true,
				   onclose:()=>{
					goRoleList()}			
				 })
				percenterDialogVisible.value=false
			}
			)
		}
		goTree()
		goRoleList()
		
</script>

<style scoped>
	.wd{
		width: 35px;
	}
	.el-pagination{
		float: right;
		margin-top: 20px;
	}
</style>